import React, { PureComponent } from 'react';
import { ModalC, FormGroup, DATA_ENTRY } from '@/src/components';
import { connect } from 'dva';

const formItemLayout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 14,
  },
};
@connect(({ personnelManagement, userM: user }) => ({
  personnelManagement,
  user,
}))
export default class instModal extends PureComponent {
  FormGroupRefList = React.createRef();

  constructor(props) {
    super(props);
    this.state = {
      formItem: {},
      portfolioId: '',
      longName: '',
      shortName: '',
      status: [],
      saveVisible: false,
    };
  }

  // 通过短名找长名
  selectlongName = (e) => {
    const { shortName } = this.props;
    const wjj = shortName.find((item) => {
      return item.value == e;
    });
    this.FormGroupRefList.current?.formRef.current.setFieldsValue({
      longName2: wjj.otherInfo,
    });
  };

  saveModal = () => {
    const { shortName, detailData = {} } = this.props;
    return (
      <>
        <FormGroup
          onRef={(ref) => {
            this.FormGroupRefList.current = ref;
          }}
          autoLayout={false}
          rowNumber={1}
          dataSource={[
            {
              dataIndex: 'portfolioId2',
              tradeModel: [],
              type: DATA_ENTRY.PRODUCTGROUP,
              disabled: !!detailData.portfolioId,
              initialValue: detailData.shortName,
              rules: [{ required: true, message: '请选择产品组' }],
              formItemLayout,
              positionBody: true,
            },
            {
              dataIndex: 'shortName2',
              title: '交易对手短名',
              type: DATA_ENTRY.SELECT,
              onChange: this.selectlongName,
              dataSource: shortName?.map((item) => ({
                title: item.title,
                value: item.value,
              })),
              initialValue: detailData.shortName,
              rules: [{ required: true, message: '请输入交易对手短名' }],
              formItemLayout,
              positionBody: true,
            },
            {
              dataIndex: 'longName2',
              title: '交易对手长名',
              type: DATA_ENTRY.INPUT,
              initialValue: detailData.longName,
              rules: [{ required: true, message: '请输入交易对手长名' }],
              formItemLayout,
              disabled: true,
            },
          ]}
        />
      </>
    );
  };

  cancel = () => {
    const { detailData } = this.props;
    if (detailData) {
      this.props.setVisible(false);
      this.FormGroupRefList.current?.resetFields();
      return;
    }
    this.props.dispatch({
      type: 'personnelManagement/save',
      payload: { saveVisible: false },
    });
    this.FormGroupRefList.current?.resetFields();
    this.props.setVisible(false);
  };

  confirmRevise = async (e) => {
    e.preventDefault();
    const { type, detailData } = this.props;
    const fieldsValue = await this.FormGroupRefList.current?.getFormGroupData();
    if (detailData) {
      // 审批页面编辑修改
      this.props.getTableDataNew(fieldsValue);
      return;
    }
    const values = {
      portfolioId: fieldsValue.portfolioId2,
      id: fieldsValue.shortName2,
      type,
    };

    this.props.dispatch({
      type: 'personnelManagement/insertBWlist',
      payload: {
        ...values,
      },
      callback: (msg) => {
        if (msg) {
          this.props.setVisible(false);
          this.props.getTableDataNew();
          this.FormGroupRefList.current?.resetFields();
        }
      },
    });
  };

  render() {
    const { titleModal } = this.props;
    return (
      <ModalC title={titleModal} visible={this.props.visible} onOk={this.confirmRevise} onCancel={this.cancel} width={440}>
        <div>{this.saveModal()}</div>
      </ModalC>
    );
  }
}
